Prerequisites:
a. Sencha Touch 2 (SDK 2.2.1 + Cmd v3.1.2.342) b. Android SDK Tools (android-17 with adt-bundle-linux-20130522) There are two alternative approaches to build HTML5 apps using build.phonegap.com for OS like Android/IOS/Windows phone/BlackBerry: (a) Approach 1 (Advantage: App seems to run faster on Android emulator): Sencha App -> Native build using st-cmd and Android SDK -> Phonegap specfic config.xml -> GitHub/Zip-package -> build.phonegap.com (b) Approach 2: Sencha App -> Production build using st-cmd -> Phonegap specfic config.xml -> GitHub/Zip-package -> build.phonegap.com Detailed description of the approaches: Approach 1 1. After generating an app source codes using st-cmd, download additional icons to the directory 'resources/icons/' from the below repository: - https://github.com/phonegap/phonegap-start/tree/master/www/res/icon 2. Now, download additional screen-icons to the directory 'resources/screen/' directory from the below repository: - https://github.com/phonegap/phonegap-start/tree/master/www/res/screen 3. Now, in the apps root directory you can locate 'app.json' file, modify this file with the below content: "resources": [ "resources/images", "resources/icons", "resources/startup", "resources/screen" ] 4. Now, generate a native-build using st-cmd & Android SDK. The result should be an apk file in the '/build/app_name/native/' directory. 5. Now, unzip the above apk file. Note! Only the 'assets' directory is of importance. 6. Add a config.xml (avaiable https://github.com/phonegap/phonegap-start/tree/master/www) to the above 'assets' directory. Now, modify the content of the config.xml as shown below: <name>UniversalMobileApp</name> <description> Test101: HTML5 App developed with Sencha Touch 2 framework for multiple mobile OS. </description> <author href="http://website.com" email="[email protected]"> Developer Name </author> <!-- Customize your app and platform with the preference element. --> <preference name="phonegap-version" value="2.9.0" /> <!-- all: current version of PhoneGap --> <preference name="orientation" value="default" /> <!-- all: default means both landscape and portrait are enabled --> <preference name="target-device" value="universal" /> <!-- all: possible values handset, tablet, or universal --> <preference name="fullscreen" value="true" /> <!-- all: hides the status bar at the top of the screen --> <preference name="webviewbounce" value="true" /> <!-- ios: control whether the screen 'bounces' when scrolled beyond the top --> <preference name="prerendered-icon" value="true" /> <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen --> <preference name="stay-in-webview" value="false" /> <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in --> <preference name="ios-statusbarstyle" value="black-opaque" /> <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar --> <preference name="detect-data-types" value="true" /> <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system --> <preference name="exit-on-suspend" value="false" /> <!-- ios: if set to true, app will terminate when home button is pressed --> <preference name="show-splash-screen-spinner" value="true" /> <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading --> <preference name="auto-hide-splash-screen" value="true" /> <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API --> <preference name="disable-cursor" value="false" /> <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app --> <preference name="android-minSdkVersion" value="17" /> <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. --> <preference name="android-installLocation" value="auto" /> <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. --> <!-- Define app icon for each platform. --> <icon src="resources/icons/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" /> <icon src="resources/icons/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" /> <icon src="resources/icons/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" /> <icon src="resources/icons/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" /> <icon src="resources/icons/blackberry/icon-80.png" gap:platform="blackberry" /> <icon src="resources/icons/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/> <icon src="resources/icons/ios/icon-57.png" gap:platform="ios" width="57" height="57" /> <icon src="resources/icons/ios/icon-72.png" gap:platform="ios" width="72" height="72" /> <icon src="resources/icons/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" /> <icon src="resources/icons/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" /> <icon src="resources/icons/webos/icon-64.png" gap:platform="webos" /> <icon src="resources/icons/windows-phone/icon-48.png" gap:platform="winphone" /> <icon src="resources/icons/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" /> <!-- Define app splash screen for each platform. --> <gap:splash src="resources/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi" /> <gap:splash src="resources/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi" /> <gap:splash src="resources/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi" /> <gap:splash src="resources/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" /> <gap:splash src="resources/screen/blackberry/screen-225.png" gap:platform="blackberry" /> <gap:splash src="resources/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" /> <gap:splash src="resources/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" /> <gap:splash src="resources/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" /> <gap:splash src="resources/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" /> <gap:splash src="resources/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" /> <access origin="*"/> <!-- allow local pages --> 8. Now, in the 'assets' directory, rename the file 'index.html' to 'main.html' 9. Now, create a new 'index.html' file with below content: <!doctype html> <html> <head> <title>tittle</title> <script> window.location='./main.html'; </script> <body> </body> </html> 10. Now, in the 'assets' directory, initialise a Git-repositry and push this repository to a new GitHub. 10.1 This is an optional step => Zipped package the entire 'assets' directory & loaded to 'build.phonegap.com' & generate the distribution packages for all possible OS. 11. Now, visit this site 'build.phonegap.com' & refer to the newly updated GitHub repository & generate the distribution packages for all possible OS. Note! Don't forget to refer to appropriate certificates for OS before package generation on 'build.phonegap.com'. Approach 2 1. Follow the steps 1 to 3 in the above mentioned 'Approach 1' 2. Now, generate a production-build using st-cmd & Android SDK. The result is that the all HTML5 related files are dumped into '/build/app_name/production/' directory. 3. Follow the steps 6 to 11 in the above mentioned 'Approach 1'. However note in these steps you should treat 'assets' directory as 'production' directory!
1 Comment
Prerequisites:
a. Sencha Touch 2 (SDK 2.2.1 + Cmd v3.1.2.342) b. Android SDK Tools (android-17 with adt-bundle-linux-20130522) 1. Android icons Create following png files in your Sencha app directory: - resources/icons/Icon_Android36.png - resources/icons/Icon_Android48.png - resources/icons/Icon_Android72.png - resources/icons/Icon_Android96.png 2. Certificate generation In the terminal, 'cd' into the Android sdk directory, for example: $ cd ~/Programs/MobileOS/Android_OS/adt-bundle-linux-x86-20130522 Now, run the below command to generate a certificate: $ keytool -genkey -v -keystore android422.keystore -alias android422 -keyalg RSA -keysize 2048 -validity 10000 3. 'packager.json' configuration The app's name is 'chukar' and in its root directory, you can locate 'packager.json' file. This file is to be modified with following configuration: - "applicationId":"com.demo.chukar" - "icon": { "36":"resources/icons/Icon_Android36.png", "48":"resources/icons/Icon_Android48.png", "72":"resources/icons/Icon_Android72.png", "96":"resources/icons/Icon_Android96.png" } - "platform":"AndroidEmulator" - "certificatePath":"~/Programs/MobileOS/Android_OS/adt-bundle-linux-x86-20130522/android422.keystore" - "certificateAlias":"android422" - "certificatePassword":"android422" - "sdkPath":"~/Programs/MobileOS/Android_OS/adt-bundle-linux-x86-20130522/sdk" - "androidAPILevel":"17" 4. Build to test for production In the terminal, 'cd' into your app directory and run below commands to fire-up the build process and test the app in the browser: $ sencha app build production $ sencha fs web -port 9911 start -map ~/Workspace/Sencha-Workspace/Dev-Apps/chukar/build/chukar/production/ 5. Enable access to st-cmd's 'st-res' folder within app's root directory In the terminal, 'cd' into app's root directory and run the below command to create a symbolic-linked folder: $ sudo ln -s ~/Programs/Sencha/Sencha/Cmd/3.1.2.342/stbuild/st-res 6. Fire-up Android device emulator In a new terminal, 'cd' into ~/Programs/MobileOS/Android_OS/adt-bundle-linux-x86-20130522/sdk/tools and run: $ ./emulator -avd Android422 7. Build native package using st-cmd In the terminal, 'cd' into the app's root directory and run: $ sencha --debug app build native 8. Install newly built app on to Android device emulator In the terminal, 'cd' into Androids sdk's 'platform-tools' directory: $ cd ~/Programs/MobileOS/Android_OS/adt-bundle-linux-x86-20130522/sdk/platform-tools Now, run the below command: $ ./adb install ~/Workspace/Sencha-Workspace/Dev-Apps/chukar/build/chukar/native/chukar.apk 9. In the emulator, open the newly installed app. |
AuthorCategories
All
Archives
January 2019
|